<template>
  <div class="Myhead">
    <el-card>
     <div style="display: flex;justify-content: space-between">
       <div>
         <el-icon class="icon-font"><Fold/></el-icon>
         <el-icon class="icon-font"><RefreshRight/></el-icon>
       </div>
       <div style="display: flex;align-items: center">
<!--         <el-icon class="icon-font"><User/></el-icon>-->
<!--         <div>联系管理员</div>-->
         <el-dropdown>
    <div class="el-dropdown-link">
<!--      Dropdown List-->
<!--      <el-icon class="el-icon&#45;&#45;right">-->
<!--        <arrow-down />-->
<!--      </el-icon>-->
               <el-icon class="icon-font"><User/></el-icon>
               <div>联系管理员</div>
    </div>
           <template #dropdown>
             <el-dropdown-menu>
               <el-dropdown-item @click="Logout">退出登录</el-dropdown-item>
             </el-dropdown-menu>
           </template>
         </el-dropdown>
       </div>
     </div>
    </el-card>
  </div>
</template>

<script setup>
import {useRouter} from "vue-router";
const router=useRouter()
const Logout=()=>{
  sessionStorage.setItem("userToken","")
  router.push({path:'/login'})
}
</script>

<style scoped>
.Myhead {
  margin-left: 160px;
  /*height: 178px;*/
  position: fixed;
  left: 0;
  right: 0;
  z-index: 100;
}
.icon-font{
  font-size: 25px;
  margin-right: 10px;
}
.el-dropdown-link{
  display: flex;
  align-items: center;
}
</style>
